<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>listview</title>
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
		<style>
			.ui-icon-custom:after {
				/*自定义图标*/
				
				background-image: url("css/images/icons-png/arrow-r-black.png");
				background-position: 3px 3px;
				background-size: 70%;
			}
		</style>
	</head>

	<body>
		<!--listview里面有a标签就会自动添加默认标签-->
		<!--data-filter表示有搜索框，可搜索-->
		<!--data-filter-placeholder="Search fruits..."表示搜索框显示内容为Search fruits...-->
		<!--data-inset = "true"设置内边距显示外边框的圆角-->
		<!--内容不折叠的搜索-->
		<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
			<li><a href="#">Apple</a></li>
			<li><a href="#">Banana</a></li>
			<li><a href="#">Cherry</a></li>
			<li><a href="#">Cranberry</a></li>
			<li><a href="#">Grape</a></li>
			<li><a href="#">Orange</a></li>
		</ul>

		<!--内容折叠的搜索-->
		<form class="ui-filterable">
			<input id="autocomplete-input" data-type="search" placeholder="Search fruits...">
		</form>
		<!--data-filter-reveal="true"ui列表里的内容折叠隐藏-->
		<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autocomplete-input" data-inset="true">
			<li><a href="#">Apple</a></li>
			<li><a href="#">Banana</a></li>
			<li><a href="#">Cherry</a></li>
			<li><a href="#">Cranberry</a></li>
			<li><a href="#">Grape</a></li>
			<li><a href="#">Orange</a></li>
		</ul>

		<!--先自动分组后搜索-->
		<!--分组没有那么智能，碰到一个A字母开头的就给它添加一个A分组，所以添加 的内容必须是顺序排好的-->
		<!--data-autodividers="true"添加自动分组-->
		<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
			<li><a href="index.html">Adam Kinkaid</a></li>
			<li><a href="index.html">Alex Wickerham</a></li>
			<li><a href="index.html">Avery Johnson</a></li>
			<li><a href="index.html">Bob Cabot</a></li>
			<li><a href="index.html">Caleb Booth</a></li>
			<li><a href="index.html">Adam Kinkaid</a></li>
			<li><a href="index.html">Alex Wickerham</a></li>
			<li><a href="index.html">Christopher Adams</a></li>
			<li><a href="index.html">Culver James</a></li>
		</ul>
		<!--自定义图标-->
		<ul data-role="listview" data-inset="true">
			<!--data-icon="custom"相当于给该元素添加一个名为ui-icon-custom的类名-->
			<!--custom表示自定义的意思，我们可以随意命名，然后就可以在CSS中自定义图标-->
			<li data-icon="custom" id="skull"><a href="#">custom-icon</a></li>
			<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
			<li data-icon="gear"><a href="#">data-icon="gear"</a></li>
			<li data-icon="info"><a href="#">data-icon="info"</a></li>
			<li data-icon="false"><a href="#">data-icon="false"</a></li>
		</ul>

		<ul data-role="listview" data-inset="true">
			<!--给a标签添加的class="ui-li-icon"，这个class的样式就是添加的左边图片的样式，所以必须添加-->
			<li>
				<a href="#"><img src="img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a>
			</li>
			<li>
				<a href="#"><img src="img/de.png" alt="Germany" class="ui-li-icon">Germany</a>
			</li>
			<li>
				<a href="#"><img src="img/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a>
			</li>
			<li>
				<a href="#"><img src="img/fi.png" alt="Finland" class="ui-li-icon">Finland</a>
			</li>
			<li>
				<a href="#"><img src="img/us.png" alt="United States" class="ui-li-icon ui-corner-none">United States</a>
			</li>
		</ul>

		<ul data-role="listview" data-inset="true">
			<li>
				<a href="#">
					<img src="img/album-bb.jpg">
					<h2>Broken Bells</h2>
					<p>Broken Bells</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/album-hc.jpg">
					<h2>Warning</h2>
					<p>Hot Chip</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!--img的width可变小不可变大-->
					<!--img的width有80px-->
					<img src="img/album-p.jpg" style="width: 100px;">
					<h2>Wolfgang Amadeus Phoenix</h2>
					<p>Phoenix</p>
				</a>
			</li>
		</ul>
	</body>

</html>